import React from "react";

type IeventCom = {
    handleClick:(date:number,e:any) => void;
    handleClick2:(e:any) => void;
}

class EventCom extends React.Component<any,any> implements IeventCom {
    constructor(props:any){
        super(props);
        // 第三种存起来，定义一个this
        this.handleClick2 = this.handleClick2.bind(this);
        this.state = {
            name:"士兵76"
        }
    }
    handleClick(date:number,e:any) {
        // event参数始终保持在参数的最末尾就行了，不需要主动传递
        console.log(e);
        console.log(date);
        this.setState(
            {
                name:"我看到你们了"
            }
        )
    }

    handleClick2(e:any){
        console.log(this);
        console.log(111);
        
    }
    render(): React.ReactNode {
        let el = "<h1>一个朴实无华的标签</h1>"
        return(
            <fieldset>
                <legend>事件</legend>
                <h1>{this.state.name}</h1>
                <a href="https://www.baidu.com/" onClick={(e) => {
                    e.preventDefault()
                }}>这是一个事件</a>

                {/* 第一种注册事件 */}
                {/* 就是直接帮箭头函数 */}
                <button onClick={() => {
                    console.log("1111");
                }}>点击</button>

                {/* 第二种注册事件 */}
                {/* 定义this指向 */}
                <button onClick={this.handleClick.bind(this,123)}>点击二</button>
                
                {/* 第三种注册事件 */}
                <button onClick={this.handleClick2}>点击三</button>

                {/* 渲染HTML */}
                <div dangerouslySetInnerHTML={{__html:el}}>

                </div>
            </fieldset> 
        )
    }
}

export default EventCom